<template>
  <el-container class="app-container">
    <!-- Sidebar -->
    <el-aside :width="isCollapse ? '64px' : '200px'" class="sidebar-container">
      <div class="logo">
        <span v-show="!isCollapse">管理系统</span>
        <span v-show="isCollapse">系统</span>
      </div>
      <el-menu
        :default-active="activeMenu"
        class="sidebar-menu"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        :collapse="isCollapse"
        :collapse-transition="false"
        router
        @select="handleSelect"
      >
        <el-menu-item index="/home/basic-data">
          <i class="el-icon-s-data"></i>
          <span slot="title">基础数据</span>
        </el-menu-item>
        
        <el-menu-item index="/home/activity-stats">
          <i class="el-icon-data-analysis"></i>
          <span slot="title">活动统计</span>
        </el-menu-item>
        
        <el-menu-item index="/home/player-info">
          <i class="el-icon-user-solid"></i>
          <span slot="title">玩家信息</span>
        </el-menu-item>
        <el-menu-item index="/home/online-info">
          <i class="el-icon-connection"></i>
          <span slot="title">在线信息</span>
        </el-menu-item>
        
        <el-menu-item index="/home/config">
          <i class="el-icon-edit-outline"></i>
          <span>配置修改</span>
        </el-menu-item>

        <el-menu-item index="/home/proplog">
          <i class="el-icon-document-checked"></i>
          <span>道具日志</span>
        </el-menu-item>
        
        <el-menu-item index="/home/taglog">
          <i class="el-icon-collection-tag"></i>
          <span>Tag日志</span>
        </el-menu-item>
        <el-menu-item index="/home/cdkey-management">
          <i class="el-icon-tickets"></i>
          <span slot="title">兑换码管理</span>
        </el-menu-item>
        
        <el-menu-item index="/home/channel-management">
          <i class="el-icon-guide"></i>
          <span slot="title">渠道管理</span>
        </el-menu-item>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-data-line"></i>
            <span>机台统计</span>
          </template>
          <el-menu-item index="/home/machine-stats/history">
            <i class="el-icon-s-data"></i>
            <span>机器历史累计数据</span>
          </el-menu-item>
          <el-menu-item index="/home/machine-stats/detail">
            <i class="el-icon-s-order"></i>
            <span>机台详细数据</span>
          </el-menu-item>
          <el-menu-item index="/home/machine-stats/daily-profit">
            <i class="el-icon-pie-chart"></i>
            <span>每日总机台盈利</span>
          </el-menu-item>
        </el-submenu>
        
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-money"></i>
            <span>充值管理</span>
          </template>
          <el-menu-item index="/home/payment/statistics">
            <i class="el-icon-s-finance"></i>
            <span>支付统计</span>
          </el-menu-item>
          <el-menu-item index="/home/payment/records">
            <i class="el-icon-document"></i>
            <span>支付记录</span>
          </el-menu-item>
          <el-menu-item index="/home/payment/management">
            <i class="el-icon-setting"></i>
            <span>支付管理</span>
          </el-menu-item>
        </el-submenu>
        
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-wallet"></i>
            <span>提现详情</span>
          </template>
          <el-menu-item index="/home/withdrawal/statistics">
            <i class="el-icon-s-finance"></i>
            <span>提现统计</span>
          </el-menu-item>
          <el-menu-item index="/home/withdrawal/records">
            <i class="el-icon-document"></i>
            <span>提现记录</span>
          </el-menu-item>
          <el-menu-item index="/home/withdrawal/management">
            <i class="el-icon-setting"></i>
            <span>支付管理</span>
          </el-menu-item>
        </el-submenu>
        
      
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-share"></i>
            <span>邀请信息</span>
          </template>
          <el-menu-item index="/home/invite/statistics">
            <i class="el-icon-pie-chart"></i>
            <span>提现统计</span>
          </el-menu-item>
          <el-menu-item index="/home/invite/records">
            <i class="el-icon-document-copy"></i>
            <span>邀请记录</span>
          </el-menu-item>
        </el-submenu>
        
        
      </el-menu>
    </el-aside>
    
    <!-- Main Content -->
    <el-container>
      <!-- Header -->
      <el-header>
        <div class="header-left">
          <i class="el-icon-s-fold toggle-sidebar" @click="toggleSidebar"></i>
        </div>
        <div class="header-right">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="user-dropdown">
              <span>{{ username }}</span>
              <i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      
      <!-- Main -->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Home',
  data() {
    return {
      isCollapse: false
    }
  },
  computed: {
    ...mapGetters(['username']),
    activeMenu() {
      return this.$route.path
    }
  },
  methods: {
    handleCommand(command) {
      if (command === 'logout') {
        this.$store.dispatch('logout')
        this.$router.push('/login')
      }
    },
    toggleSidebar() {
      this.isCollapse = !this.isCollapse
    },
    handleSelect() {
      // 在小屏幕上自动收缩侧边栏
      if (window.innerWidth < 992) {
        this.isCollapse = true
      }
    }
  },
  mounted() {
    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      if (window.innerWidth < 992) {
        this.isCollapse = true
      } else {
        this.isCollapse = false
      }
    })
    
    // 初始设置
    if (window.innerWidth < 992) {
      this.isCollapse = true
    }
  },
  beforeDestroy() {
    // 移除监听器
    window.removeEventListener('resize')
  }
}
</script>

<style scoped>
.app-container {
  height: 100vh;
}

.el-aside {
  background-color: #304156;
  color: #bfcbd9;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.logo {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  background-color: #263445;
  flex-shrink: 0;
}

.el-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  color: #333;
  line-height: 60px;
  border-bottom: 1px solid #dcdfe6;
}

.header-left {
  display: flex;
  align-items: center;
}

.toggle-sidebar {
  font-size: 20px;
  cursor: pointer;
}

.user-dropdown {
  cursor: pointer;
}

.el-main {
  background-color: #f0f2f5;
  /* padding: 20px; */
}

.sidebar-menu {
  border-right: none;
  overflow-y: auto;
  flex: 1;
  /* 隐藏滚动条 */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */ 
}

.sidebar-menu::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.sidebar-container {
  transition: width 0.3s;
}
</style> 